import React, { Component } from 'react';
import { inject, observer } from 'mobx-react'

@inject('cartStore')
@observer
class AppleList extends Component {

    render () {
        const { applesList, eatApple } = this.props.cartStore
        return (
            <div className="appleList">
                {applesList.length===0?
                    <div className="empty-tip" key="empty"> 篮子空空如也</div>
                    :
                    applesList.map(apple => (
                        <div className="appleItem" key={apple.id}>
                            <div className="apple">
                                <img src={require('../images/apple.png')} alt="" />
                            </div>
                            <div className="info">
                                <div className="name">红苹果 - {apple.id}号</div>
                                <div className="weight">{apple.weight}克</div>
                            </div>
                            <div className="btn-div">
                                <button onClick={() => eatApple(apple.id)}> 吃掉 </button>
                            </div>
                        </div>
                    ))
                }
            </div>
        );
    }
}

export default AppleList;
